<template>
  <view>
    <u-popup v-model="show" mode="bottom" zIndex="999" border-radius="14" @close="closeThePopUpBox">
      <view>
        <view class="cu-dialog !bg-white !rounded-t-[1rem]" @click.stop>
          <view class="flex flex-col gap-4 py-5">
            <view class="flex justify-between items-center px-4">
              <view class="font-bold text-[1.25rem] text-[#171B24]">你对此钓点的评价</view>
              <view
                class="w-[1.5rem] h-[1.5rem] bg-[#F4F6F8] flex justify-center items-center rounded-full"
                @click="closeThePopUpBox"
              >
                <u-icon name="close" color="#171B24" size="26"></u-icon>
              </view>
            </view>
            <div class="bg-[#F4F6F8] w-full h-[.0625rem]"></div>
            <view class="flex flex-col gap-5 justify-center items-center px-4">
              <view class="grid grid-cols-5 place-items-center w-full">
                <view
                  class="flex flex-col col-span-1 gap-[.125rem] items-center"
                  v-for="(item, index) in ratingOptions"
                  :key="index"
                  @click="selectRating(index)"
                >
                  <image
                    :src="currentRating === index ? item.activeIcon : item.inactiveIcon"
                    :class="[
                      'size-10 ease-bounce rounded-full transition-all duration-300',
                      currentRating === index ? 'transform scale-110 animate-bounce' : 'hover:scale-105'
                    ]"
                  />
                  <view
                    :class="[
                      'text-[.75rem] font-medium transition-all duration-300',
                      currentRating === index ? 'text-[#FF9A07] transform scale-110' : 'text-[#C0C4CC]'
                    ]"
                  >
                    {{ item.label }}
                  </view>
                </view>
              </view>
              <view class="bg-[#F4F6F8] rounded-[.75rem] flex flex-col gap-1 w-full p-4 max-h-[11.25rem]">
                <textarea
                  v-model="value"
                  class="text-[.875rem] w-full"
                  :maxlength="length"
                  placeholder="发表一些评论~"
                ></textarea>
                <view class="flex justify-between items-center">
                  <view></view>
                  <view class="text-[.75rem] text-[#C0C4CC]">{{ value.length }}/{{ length }}</view>
                </view>
              </view>
              <view
                class="w-[16.75rem] h-[3rem] rounded-[1.5rem] grid place-content-center transition-all duration-300 transform hover:scale-105 active:scale-95"
                :class="canSubmit ? 'bg-[#00A9AB] shadow-md' : 'bg-[#99DBDC]'"
                @click="submitComment"
              >
                <view class="text-[1rem] text-[#FFFFFF]">提交</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    name: 'yy-comment',
    data() {
      return {
        show: false,
        length: 200,
        value: '',
        currentRating: -1, // 当前选中的评分，-1表示未选择
        ratingOptions: [
          {
            label: '很糟',
            inactiveIcon: '/static/rating/dddr10.png',
            activeIcon: '/static/rating/dddr5.png'
          },
          {
            label: '较差',
            inactiveIcon: '/static/rating/dddr6.png',
            activeIcon: '/static/rating/dddr1.png'
          },
          {
            label: '一般',
            inactiveIcon: '/static/rating/dddr9.png',
            activeIcon: '/static/rating/dddr4.png'
          },
          {
            label: '可以',
            inactiveIcon: '/static/rating/dddr8.png',
            activeIcon: '/static/rating/dddr3.png'
          },
          {
            label: '超赞',
            inactiveIcon: '/static/rating/dddr7.png',
            activeIcon: '/static/rating/dddr2.png'
          }
        ]
      }
    },
    props: {
      showComment: {
        type: Boolean,
        default: false
      },
      spotId: {
        type: [String, Number],
        default: ''
      }
    },
    computed: {
      canSubmit() {
        return this.currentRating >= 0 && this.value.trim().length > 0
      }
    },
    watch: {
      showComment: {
        immediate: true,
        deep: true,
        handler(newValue) {
          this.show = newValue
          if (newValue) {
            // 重置数据
            this.resetForm()
          } else {
            // 关闭弹框时重置数据
            this.value = ''
            this.currentRating = -1
          }
        }
      }
    },
    methods: {
      closeThePopUpBox() {
        this.$emit('update:showComment', false)
      },
      selectRating(index) {
        // 单选逻辑：点击已选中的评分不会取消选择
        this.currentRating = index
      },
      resetForm() {
        // 重置表单，保持当前评分不变
        this.value = ''
      },
      submitComment() {
        vk.pubfn.debounce(() => {
          if (!this.canSubmit) return vk.toast('请先选择评分和填写评论', 'none')
          // 构建评论数据
          const commentData = {
            spotId: this.spotId,
            rating: this.currentRating + 1, // 转换为1-5的评分
            content: this.value,
            timestamp: new Date().getTime()
          }

          // 这里可以调用API提交评论，或者通过事件传递给父组件处理
          this.$emit('submit-comment', commentData)

          // this.closeThePopUpBox()
        }, 500)
      }
    }
  }
</script>

<style>
  /* 添加一些动画效果 */
  @keyframes bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.3125rem);
    }
  }

  .animate-bounce {
    animation: bounce 0.5s ease-in-out;
  }

  .ease-bounce {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
</style>
